<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
BFC:块级格式上下文
    a)形成BFC的条件
        i)浮动元素(float除none以外的值)
        ii)定位元素(position(absolute/fixed))
        iii)display(f为inline-block/table-cell/table-caption时)
        iv)overflow(fi为hidden/auto/scroll时)
    b)BFC特性
        i)内部的盒子会在垂直方向上一个接一个的放置
        ii)垂直方向上的距离会叠加，值由最大margin值决定(如果不要叠加，就需要将该盒子变成一个独立的盒子)
        iii)BFC的区城不会float元素区城重叠
        iv)计算BFC的高度时，浮动元素也参与计算
        v)BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素

IFC:内联(行级)格式上下文
    a)形成IFC的条件
        i)font-size
        ii)line-height
        iii)height
        iv)vertical-align
    b)IFC特性(规则)
        i)IFC的元素会在一行中从左至右排列
        ii)在一行上的所有元素会在该区域形成一个行框
        iii)行宽的高度为包含框的高度，高度为行框中最高元素的高度
        iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的突度
        v)行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
        vi)行框的元素内遵循text-align利vertical-align
        实际height = vertical-align + line-height
-->

</body>
</html>